<template>
    <div style="width:100%">
      <input v-show="false" type="file" accept="image/*" @change="tirggerFile($event)" ref="input" />
      <div style="width:150px;height:100px;text-align:center;background:#DCDCDC;" @click="openImg">
        <img style="height:100%;width:100%;" v-if="imgUrl!=''" :src="imgUrl" />
      </div>
    </div>
</template>


<script>
export default {
  name: "water-apply-detail",
  data() {
    return {
      isSelectFile: false,
      imgUrl: "",
    };
  },
  methods: {
    tirggerFile: function(event) {
      let file = event.target.files[0];
      let url = "";
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let that = this;
      reader.onload = function(e) {
        url = this.result.substring(this.result.indexOf(",") + 1);
        that.imgUrl = "data:image/png;base64," + url;
        //that.$refs['imgimg'].setAttribute('src','data:image/png;base64,'+url);
        that.$emit('child-event',url)
      };
    },
    openImg() {
      this.$refs.input.click();
    },
  },
  props:['url']
};
</script>

<style scoped>
</style>